<template>
  <el-tabs type="border-card">
    <el-tab-pane label="自定义图标">
      <h2>使用方法</h2>
      <p style="line-height: 50px">
        直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标）
      </p>
      <p class="example-p">
        <i class="el-icon-lx-redpacket_fill" style="font-size: 30px; color: #ff5900"></i>
        <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
      </p>
      <p class="example-p">
        <i class="el-icon-lx-weibo" style="font-size: 30px; color: #fd5656"></i>
        <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
      </p>
      <p class="example-p">
        <i class="el-icon-lx-emojifill" style="font-size: 30px; color: #ffc300"></i>
        <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
      </p>
      <br />
      <h2>图标</h2>
      <div class="search-box">
        <el-input
          class="search"
          size="large"
          v-model="keyword"
          clearable
          placeholder="请输入图标名称"
        ></el-input>
      </div>
      <ul>
        <li class="icon-li" v-for="(item, index) in list" :key="index">
          <div class="icon-li-content">
            <i :class="`el-icon-lx-${item}`"></i>
            <span>{{ item }}</span>
          </div>
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="Element图标">
      <el-link
        type="primary"
        href="https://element-plus.org/zh-CN/component/icon.html#icon-collection"
        target="_blank"
        >前往官方文档查看</el-link
      >
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts" name="icon">
import { computed, ref } from 'vue'

const iconList: Array<string> = [
  'attentionforbid',
  'attentionforbidfill',
  'attention',
  'attentionfill',
  'tag',
  'tagfill',
  'people',
  'peoplefill',
  'notice',
  'noticefill',
  'mobile',
  'mobilefill',
  'voice',
  'voicefill',
  'unlock',
  'lock',
  'home',
  'homefill',
  'delete',
  'deletefill',
  'notification',
  'notificationfill',
  'notificationforbidfill',
  'like',
  'likefill',
  'comment',
  'commentfill',
  'camera',
  'camerafill',
  'warn',
  'warnfill',
  'time',
  'timefill',
  'location',
  'locationfill',
  'favor',
  'favorfill',
  'skin',
  'skinfill',
  'news',
  'newsfill',
  'record',
  'recordfill',
  'emoji',
  'emojifill',
  'message',
  'messagefill',
  'goods',
  'goodsfill',
  'crown',
  'crownfill',
  'move',
  'add',
  'hot',
  'hotfill',
  'service',
  'servicefill',
  'present',
  'presentfill',
  'pic',
  'picfill',
  'rank',
  'rankfill',
  'male',
  'female',
  'down',
  'top',
  'recharge',
  'rechargefill',
  'forward',
  'forwardfill',
  'info',
  'infofill',
  'redpacket',
  'redpacket_fill',
  'roundadd',
  'roundaddfill',
  'friendadd',
  'friendaddfill',
  'cart',
  'cartfill',
  'more',
  'moreandroid',
  'back',
  'right',
  'shop',
  'shopfill',
  'question',
  'questionfill',
  'roundclose',
  'roundclosefill',
  'roundcheck',
  'roundcheckfill',
  'global',
  'mail',
  'punch',
  'exit',
  'upload',
  'read',
  'file',
  'link',
  'full',
  'group',
  'friend',
  'profile',
  'addressbook',
  'calendar',
  'text',
  'copy',
  'share',
  'wifi',
  'vipcard',
  'weibo',
  'remind',
  'refresh',
  'filter',
  'settings',
  'scan',
  'qrcode',
  'cascades',
  'apps',
  'sort',
  'searchlist',
  'search',
  'edit',
  'apple-line',
  'baidu-fill',
  'amazon-fill',
  'netease-cloud-music-fill',
  'qq-line',
  'wechat-fill',
  'alipay-fill',
  'android-fill',
  'android-line',
  'whatsapp-line',
  'whatsapp-fill',
  'bilibili-fill',
  'chrome-fill',
  'dingding-fill',
  'dingding-line',
  'apple-fill',
  'github-fill',
  'qq-fill',
  'wechat-pay-fill',
  'windows-line',
  'windows-fill',
  'youtube-line',
  'youtube-fill',
  'wechat-pay-line',
  'zhihu-line'
]

const keyword = ref('')
const list = computed(() => {
  return iconList.filter((item) => {
    return item.indexOf(keyword.value) !== -1
  })
})
</script>

<style scoped>
.example-p {
  height: 45px;
  display: flex;
  align-items: center;
}

.search-box {
  text-align: center;
  margin-top: 10px;
}

.search {
  width: 300px;
}

ul,
li {
  list-style: none;
}

.icon-li {
  display: inline-block;
  padding: 10px;
  width: 120px;
  height: 120px;
}

.icon-li-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-li-content i {
  font-size: 36px;
  color: #606266;
}

.icon-li-content span {
  margin-top: 10px;
  color: #787878;
}

.iframe {
  width: 100%;
  height: 700px;
}
</style>
